<template>
  <div class="mine-container">
    <!-- 用户信息头部 -->
    <div class="user-header">
      <div class="user-info">
        <h2 class="user-name">{{ userInfo.name || '用户名' }}</h2>
        <p class="user-phone">{{ formatPhone(userInfo.phone) || '未绑定手机号' }}</p>
        <p class="user-vip" :class="{ 'vip-active': userInfo.vip === 0 }">
          <el-tag :type="userInfo.vip === 0 ? 'success' : 'info'" size="small">
            {{ userInfo.vip === 0 ? 'VIP会员' : '普通用户' }}
          </el-tag>
        </p>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-list">
      <div class="menu-item">
        <el-icon><User /></el-icon>
        <span>个人信息</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item">
        <el-icon><Lock /></el-icon>
        <span>修改密码</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item" v-if="userInfo.vip === 1" @click="goToMembership">
        <el-icon><Medal /></el-icon>
        <span>VIP会员开通</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item" v-else>
        <el-icon><Medal /></el-icon>
        <span>VIP会员中心</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item">
        <el-icon><Bell /></el-icon>
        <span>消息通知</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item">
        <el-icon><Setting /></el-icon>
        <span>设置</span>
        <el-icon class="arrow-right"><ArrowRight /></el-icon>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <el-button
          type="danger"
          round
          size="large"
          class="logout-btn"
          @click="handleLogout"
      >
        退出登录
      </el-button>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Lock, Bell, Setting, ArrowRight, Medal } from '@element-plus/icons-vue'
import api from '@/utils/api'
import { removeJwt } from '@/api/jwt'

// 用户信息
const userInfo = ref({
  name: '',
  phone: '',
  vip: 1 // 0表示已入会，1表示未入会
})

const router = useRouter()

// 格式化手机号显示
const formatPhone = (phone: string) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 假设后端有获取用户信息的接口 /api/member
    const response = await api({
      url: '/member',
      method: 'get',
    })

    if (response.code === 200 && response.success) {
      userInfo.value = response.data
    } else {
      ElMessage.error(response.message || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 前往会员页面
 const goToMembership = async() => {
  let resp=await api({
    url: "/member/vipRegister",
    method: "PUT"
  })
   if(resp.success) {
     await fetchUserInfo();
     ElMessage.success(resp.message)
   } else {
     ElMessage.error(resp.message || '会员开通失败')
   }
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 清除JWT token
    removeJwt()
    // 跳转到登录页
    router.push('/login')
    ElMessage.success('已退出登录')
  }).catch(() => {
    // 用户取消操作
  })
}

// 组件挂载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.mine-container {
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

.user-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 30px 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.user-avatar {
  margin-right: 15px;
}

.user-info {
  text-align: center;
}

.user-name {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: bold;
}

.user-phone {
  margin: 0 0 5px 0;
  font-size: 14px;
  opacity: 0.9;
}

.user-vip {
  margin: 0;
}

.user-vip.vip-active :deep(.el-tag) {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}

.menu-list {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item el-icon:first-child {
  font-size: 18px;
  margin-right: 10px;
  color: #409eff;
}

.menu-item span {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.arrow-right {
  color: #ccc;
}

.logout-section {
  margin-top: 30px;
  text-align: center;
}

.logout-btn {
  width: 80%;
  font-weight: bold;
}
</style>